import { useEffect, useRef } from 'react'

export function useDroppable() {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    initDropEvent();
    return () => {
      removeEventListener();
    }
  }, [ref])

  function initDropEvent() {
    if (!ref.current) return

    ref.current.addEventListener('drop', (e) => {
      console.log('drop ', e);
    })
  }

  function removeEventListener() {
    if (!ref.current) return

    ref.current.removeEventListener('drop', (e) => {
      console.log('dropre ', e);
    })
  }

  return {
    ref
  }
}